<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8" />
    <title></title>
    <link href="Content/themes/base/jquery-ui.css" rel="stylesheet" />
    <link href="css/styles.css" rel="stylesheet" />
</head>
<body>
    <div id="fb-root"></div>
    <script>(function (d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id))
        return;
    js = d.createElement(s);
    js.id = id;
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1&appId=124502774424729";
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>

    <div id="tabs">
        <ul>
            <li>
                <a href="#menu">Menu</a>
            </li>
            <li>
                <a href="#OurHistory">History</a>
            </li>
        </ul>
        <div id="menu" data-bind="foreach: menuData">
            <h3>
                <a href="#" data-bind="text: categoryName"></a>
            </h3>
            <div data-bind="foreach: data">
                <div class="menuItem" data-bind="attr: {'data-id': id}">
                    <span>Name: </span><strong data-bind="text: name"></strong>
                    <span>Price: </span><strong data-bind="text: price"></strong>
                </div>
            </div>
        </div>
        <div id="OurHistory">
            <div id="history" data-bind="foreach: ordersHistory">
                <h3>
                    <a href="#" data-bind="text: orderDate">Order date</a>
                </h3>
                <div class="historyOrder" data-bind="foreach: data, attr: {'data-orderid': orderDate}">
                    <div data-bind="attr: {'data-id': id}">
                        <strong data-bind="text: $root.itemsMap[id].name"></strong>
                        <strong data-bind="text: quantity"></strong>
                    </div>
                </div>
            </div>
            <button id="clearHistory">Clear</button>
        </div>
    </div>

    <div id="order">
        <h1 class="ui-widget-header">Order</h1>
        <div class="ui-widget-content">
            <ol data-bind="foreach: order">
                <li data-bind="attr: {'data-id': id}">
                    <strong data-bind="text: $root.itemsMap[id].name"></strong>
                    <input type="number" data-bind="value: quantity" />
                    <button data-bind="click: $root.removeOrderItem">X</button>
                    <strong data-bind="text: $root.itemsMap[id].price"></strong>
                    <strong data-bind="text: totalPrice().toFixed(2)"></strong>
                </li>
            </ol>
            <span>Total:<strong data-bind="text: totalPrice().toFixed(2)"></strong></span>
            <button id="clearOrder">Clear</button>
            <button id="sendOrder">Send</button>
        </div>
        <div id="social-stuff">
            <div class="fb-like" data-href="https://www.facebook.com/WiRestaurantW" data-send="true" data-width="450" data-show-faces="true"></div>
            <div class="fb-login-button">Login with Facebook</div>
            <div id="share-button-wrapper">
                <img id="fb-icon" src="img/fb/facebook-small.gif" width="16" height="16" />
                <a id="share-button" href="#" onclick="javascript:popitup('https://www.facebook.com/sharer/sharer.php?u=https://www.facebook.com/WiRestaurantW');">Share</a>
            </div>
        </div>
    </div>

    <div id="additionalInfo" class="hidden" data-bind="attr: {'data-id': info.id}">
        <img data-bind="attr: {src: info.src, alt: info.name}" />
        <section>
            <header>
                <h3 data-bind="text: info.name"></h3>
                <span>Price: <strong data-bind="text: info.price"></strong></span>
                <span>Preparation time: <strong data-bind="text: info.time"></strong></span>
            </header>
            <p>
                Description: <strong data-bind="text: info.description"></strong>
            </p>
            <span data-bind="text: info.id"></span>
        </section>
        <button id="close">
            X
        </button>
    </div>
    <div id="promotionHandler">
        <span>Promotion of the day :</span>
        <div id="promotionContainer">
            <div id="slideBar" data-bind="foreach:promotionItems">
                <div class="slide" data-bind="attr: {'data-id': id}">
                    <img class="promotions" data-bind="attr:{src: $root.itemsMap[id].imgSrc,'data-id': id}" />
                </div>
            </div>
            <img id="cock" src="img/chefCoocker.jpg" />
        </div>
    </div>


    <script src="scripts/jquery-2.0.2.js"></script>
    <script src="scripts/jquery-ui-1.10.3.js"></script>
    <script src="scripts/knockout-2.2.1.js"></script>
    <script src="scripts/Utills.js"></script>
    <script src="scripts/Class.js"></script>
    <script src="scripts/server.js"></script>
    <script src="scripts/MenuViewModel.js"></script>
    <script src="scripts/menu.js"></script>
    <script src="scripts/order.js"></script>
    <script src="scripts/menuSystem.js"></script>
    <script type="text/javascript" src="scripts/zoom.js"></script>
    <script src="scripts/fbStuff/fbLogin.js"></script>
    <script src="scripts/popitup.js"></script>
</body>
</html>
